<template>
  <van-row style="margin:10px auto">
    <van-col
      span="8"
      style="text-align: center;"
    >小陈</van-col>
    <van-col
      span="8"
      style="text-align: center;"
    >22002222</van-col>
    <van-col
      span="8"
      style="text-align: center;"
    >22软件3班</van-col>
  </van-row>
  <van-dropdown-menu>
    <van-dropdown-item
      v-model="value1"
      :options="option1"
    />
    <van-dropdown-item
      v-model="value2"
      :options="option2"
    />
  </van-dropdown-menu>
  <van-collapse v-model="activeNames">
    <van-collapse-item
      title="Vue3开发初体验"
      name="1"
    >
      权重：4%
      <a
        href="#"
        style=" float: right;color:red; "
      >95分</a>
    </van-collapse-item>
    <van-collapse-item
      title="Vue3组件化开发"
      name="2"
    >
      权重：2%
      <a
        href="#"
        style=" float: right;color:red; "
      >85分</a>
    </van-collapse-item><van-collapse-item
      title="Vue3路由的使用"
      name="3"
    >
      权重：2.5%
      <a
        href="#"
        style=" float: right;color:red; "
      >70分</a>
    </van-collapse-item>
    <van-collapse-item
      title="电影列表项目"
      name="4"
    >
      权重：3%
      <a
        href="#"
        style=" float: right;color:red; "
      >90分</a>
    </van-collapse-item>
    <van-collapse-item
      title="Vue自动化测试"
      name="5"
    >
      权重：5%
      <a
        href="#"
        style=" float: right;color:red; "
      >95分</a>
    </van-collapse-item>
    <van-collapse-item
      title="状态管理Pinia"
      name="6"
    >
      权重：2.8%
      <a
        href="#"
        style=" float: right;color:red; "
      >90分</a>
    </van-collapse-item>
    <van-collapse-item
      title="使用UI组件库"
      name="7"
    >
      权重：7%
      <a
        href="#"
        style=" float: right;color:red; "
      >80分</a>
    </van-collapse-item>
    <van-collapse-item
      title="小组作业"
      name="8"
    >
      权重：7.5%
      <a
        href="#"
        style=" float: right;color:red; "
      >85分</a>
    </van-collapse-item>
    <van-collapse-item
      title="学习网站"
      name="9"
    >
      权重：4.2%
      <a
        href="#"
        style=" float: right;color:red; "
      >70分</a>
    </van-collapse-item>
    <van-collapse-item
      title="API使用"
      name="10"
    >
      权重：3.33%
      <a
        href="#"
        style=" float: right;color:red; "
      >90分</a>
    </van-collapse-item>
    <van-collapse-item
      title="经销存"
      name="11"
    >
      权重：4.1%
      <a
        href="#"
        style=" float: right;color:red; "
      >85分</a>
    </van-collapse-item>
    <van-collapse-item
      title="员工管理"
      name="12"
    >
      权重：5%
      <a
        href="#"
        style=" float: right;color:red; "
      >75分</a>
    </van-collapse-item>
  </van-collapse>

</template>
  
  <script>
import { ref } from "vue";
import { showToast } from "vant";

export default {
  setup() {
    const value = ref("");
    const onSearch = (val) => showToast(val);
    const onCancel = () => showToast("取消");
    const value1 = ref(0);
    const value2 = ref("a");
    const activeNames = ref(["1"]);

    const option1 = [
      { text: "选择课程", value: 0 },
      { text: "前端框架应用项目开发", value: 1 },
      { text: "Web前端开发技术", value: 2 },
      { text: "专业技能综合实践", value: 3 },
      { text: "数据库高级应用", value: 4 },
      { text: "程序设计基础", value: 5 },
    ];
    const option2 = [
      { text: "任务类型", value: "a" },
      { text: "刷题", value: "b" },
      { text: "作品", value: "c" },
    ];
    return {
      value,
      onSearch,
      onCancel,
      value1,
      value2,
      option1,
      option2,
      activeNames,
    };
  },
};
</script>